<template>
  <div>
    <el-page-header @back="$router.push('/workforcemanagement')" content="排班设置" style="margin-bottom:15px;">
</el-page-header>
<el-card >
  <el-row>
    <el-button type="danger" style="margin:10px;" @click="add">添加工作模式</el-button>
  </el-row>
  <el-table :data="tableData" style="width: 100%">
     <el-table-column prop="id"  label="工作模式编号"  width="180"> </el-table-column>
      <el-table-column  prop="name"  label="工作模式" width="180"> </el-table-column>
      <el-table-column prop="workPatternTypeDesc"  label="类型"> </el-table-column>
      <el-table-column prop="workDate"  label="工作日期"> </el-table-column>
      <el-table-column prop="workEndMinute1"  label="工作时间" >
        <template #default="{row}">
          <div>{{((row.workEndMinute1 - row.workStartMinute1)/60).toFixed(2)}}小时</div>
        </template>
         </el-table-column>
      <el-table-column  label="操作">
        <template #default="{row}">
            <el-button  type="text" size="small" @click="edit(row.id)">编辑</el-button>
         <el-divider direction="vertical"></el-divider>
        <el-button  type="text" size="small" style="color:red;" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
    class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageing.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageing.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
<!-- logo -->
<!-- <el-row>
  <el-col style="font-size: 14px; color: rgb(186, 192, 205); text-align: center; padding-bottom: 20px; background-color: rgb(243, 244, 247); position: absolute; bottom: 0px; left: 0%; width: 100%; padding-top: 20px;">
    江苏传智播客教育科技股份有限公司
    <span data-v-0a565c83="" style="margin-left: 20px;">版权所有Copyright 2006-2022  All Rights Reserved</span>
    <span data-v-0a565c83="" style="margin-left: 20px;">苏ICP备16007882号-11</span>
  </el-col>
</el-row> -->
<!-- 编辑 -->
<el-dialog
  title="编辑工作模式"
  :visible.sync="showDialog"
  width="50%"
 >
  <el-tabs   style="margin-left:15px;">
    <el-tab-pane label="连续制" name="first" >用户管理</el-tab-pane>
  </el-tabs>
 <el-form :model="form" :rules="rules" ref="ruleForm"  >
  <el-form-item label="工作模式名称：" prop="name">
    <el-input v-model="form.name" class="shurukuang"></el-input>
  </el-form-item>
  <el-form-item label="连续工作天数" prop="workDayNum">
    上<el-input v-model="form.workDayNum" style="width: 110px; margin-right: 21px; margin-left: 10px;">
      <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;">天</span>
    </template>
    </el-input>
     休<el-input  style="width: 110px; margin-right: 21px; margin-left: 10px;">
         <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;"> {{(form.workEndMinute1)/60}}天</span>
    </template>
      </el-input>
  </el-form-item>
  <el-form-item label="工作时间" prop="workStartMinute1" label-width="120px">
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="00:00"
    end-placeholder="00:00"
    placeholder="选择时间范围">
  </el-time-picker>
  </el-form-item>
 </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button  type="danger" @click="submit">确 定</el-button>
    <el-button  @click="showDialog = false">取 消</el-button>
  </span>

</el-dialog>
<!-- 新增添加 -->
<el-dialog
  title="新增工作模式"
  :visible.sync="dialogVisible"
  width="40%"
>
  <el-tabs v-model="activeName"  style="margin-left:15px;">
    <el-tab-pane label="礼拜制" name="first" >
       <el-form :model="form" :rules="rules" ref="ruleForm"  >
  <el-form-item label="工作模式名称：" prop="workPatternType" >
    <el-input v-model="form.workPatternType" style="width:400px" placeholder="请填写工作模式名称"></el-input>
  </el-form-item>
   <el-form-item label="连续工作天数: ">
    <el-checkbox-group v-model="form" class="workdays">
      <el-checkbox label="周一" name="type" style="margin-right: 12px"></el-checkbox>
      <el-checkbox label="周二" name="type" style="margin-right: 12px"></el-checkbox>
      <el-checkbox label="周三" name="type" style="margin-right: 12px"></el-checkbox>
      <el-checkbox label="周四" name="type" style="margin-right: 12px"></el-checkbox>
      <el-checkbox label="周五" name="type" style="margin-right: 12px"></el-checkbox>
      <el-checkbox label="周六" name="type" style="margin-right: 12px"></el-checkbox>
      <el-checkbox label="周日" name="type"></el-checkbox>
    </el-checkbox-group>
    <el-col style="margin-left: 130px;

    color: #bac0cd;">
      选中为工作时间，未选中为休息时间
    </el-col>
  </el-form-item>
   <el-form-item label="工作时间" prop="workStartMinute1" label-width="120px" style="margin-top:20px;">
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="00:00"
    end-placeholder="00:00"
    placeholder="选择时间范围">
  </el-time-picker>
  </el-form-item>
       </el-form>
    </el-tab-pane>
    <el-tab-pane label="连续制" name="second" >
      <el-form :model="form" :rules="rules" ref="ruleForm"  >
  <el-form-item label="工作模式名称：" prop="name" >
    <el-input v-model="form.name" style="width:400px" placeholder="请填写工作模式名称"></el-input>
  </el-form-item>
  <el-form-item label="连续工作天数: " prop="workDayNum">
    上<el-input v-model="form.workDayNum" style="width: 110px; margin-right: 21px; margin-left: 10px;" placeholder="请输入">
      <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;">天</span>
    </template>
    </el-input>
      休<el-input v-model="form.workEndMinute1" style="width: 110px; margin-right: 21px; margin-left: 10px;" placeholder="请输入">
         <template slot="suffix" ><span style=" color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
    line-height: 40px;">天</span>
    </template>
      </el-input>
  </el-form-item>
  <el-form-item label="工作时间" prop="workStartMinute1" label-width="120px">
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="00:00"
    end-placeholder="00:00"
    placeholder="选择时间范围">
  </el-time-picker>
  </el-form-item>
 </el-form>
    </el-tab-pane>
  </el-tabs>
  <span slot="footer" class="dialog-footer" >
    <el-button type="danger" @click="dialogVisible = false">确 定</el-button>
    <el-button  @click="dialogVisible = false">取 消</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { DelworkingModeType, shiftSetting, workingModeId, workingModeType } from '@/api/workforce'
export default {
  name: 'workArrangeInfo',
  data () {
    return {
      activeName: 'first',
      dialogVisible: false,
      value1: [],
      form: {},
      showDialog: false,
      tableData: [],
      pageing: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      hour: '',
      ruleForm: {
        name: ''
      },
      rules: {
        workPatternType: [{ required: true, message: '请输入工作模式名称', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],

        workDayNum: [
          { required: true, message: '请输入上几天班', trigger: 'blur' }
        ],
        workStartMinute1: [
          { required: true, message: '请输入工作时间', trigger: 'blur' }
        ]
      },
      idValue: null

    }
  },
  created () {
    this.getList()
  },
  methods: {
    async   add () {
      this.dialogVisible = true
      // const res = await AddworkingModeType()
      // console.log(res)
      // this.form = res.data
    },
    // 删除
    async del (id) {
      await DelworkingModeType(id)
      this.$message.success('删除成功')
    },
    // 确定
    async  submit () {
      const res = await workingModeType(this.form)
      console.log(res)
      this.showDialog = false
    },
    // 编辑
    async   edit (id) {
      this.idValue = id
      this.showDialog = true
      const res = await workingModeId(id)
      // console.log(res)
      this.form = res.data
    },
    // 列表渲染
    async getList () {
      const res = await shiftSetting(this.pageing)
      // console.log(res)
      this.tableData = res.data.items
      this.pageing.page = res.data.page
      this.pageing.pageSize = res.data.pageSize
      this.total = +res.data.counts
    },
    handleSizeChange (newSize) {
      this.pageing.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newpage) {
      this.pageing.page = newpage
      this.getList()
    }

  }
}
</script>

<style>
.page {
  text-align: center;
  margin-top: 8px;
}
.shurukuang {
  width: 500px;
}
.el-dialog__footer {
  text-align: center;
}
.workdays{
  display: flex;
  justify-content: space-around;
}
</style>
